
import AppBox from '@/components/AppBox';
import { useAppSelector } from '@/utils/hooks';
import { getClassNames } from 'magic-ui-react';
import moment from 'moment';
import {
  Icon
} from 'magic-ui-react'
import styles from './styles.module.less'
import { useEffect, useState } from 'react';
import Widget from '@/Widgets/Widget';
import WidgetList from '@/Widgets/WidgetList';

/**
 * 抽屉（工具）
 */
const AppDrawer = () => {
  const {
    appConfig,
    off: {
      isPc,
    }
  } = useAppSelector((state) => state);

  const [open, setOpen] = useState(false);
  const [gridTemplate, setGridTemplate] = useState({});

  const {
    appDrawerBoxsList,
    appDrawer,
    box
  } = appConfig

  useEffect(() => {
    const boxList = appDrawerBoxsList
    let gridTemplateRowsNum = 3
    let total = boxList.length > 0 ? boxList?.map(e => Number(e.sizeType.split('-')[0]) * Number(e.sizeType.split('-')[1]))?.reduce((a, b) => a + b) : 0
    let rowNum = Math.floor(total / 8)
    gridTemplateRowsNum = rowNum + 6

    let newGridTemplate = isPc ? {
      gridTemplateColumns: `repeat(4, ${box.size}px`,
      gridTemplateRows: `repeat(${gridTemplateRowsNum}, ${box.size}px`,
    } : {
      gridTemplateColumns: `repeat(4, calc((100vw - ${24 * 7}px) / 4))`,
      gridTemplateRows: `repeat(${gridTemplateRowsNum}, calc((100vw - ${24 * 7}px) / 4))`,
    }
    setGridTemplate(newGridTemplate)
  }, []);

  return (
    <div
      style={{
        display: appDrawer.open ? 'flex' : 'none',
      }}
      className={styles.AppDrawer}
    >
      <div className={styles.top}>
        <div>
          {moment().format('YYYY-MM-DD')}
        </div>
        <div >
          <Icon
            onClick={() => {
              setOpen(!open)
            }}
            className={getClassNames([
              'align-middle transition cursor-pointer',
              {
                'rotate-45': open
              }
            ])}
            icon='plus'
            size={20}
          />
        </div>
      </div>
      <div className='h-full overflow-auto'>
        <ol
          style={{
            display: 'grid',
            rowGap: 32,
            columnGap: 24,
            padding: 24,
            gridAutoFlow: 'row dense',
            ...gridTemplate
          }}
        >
          {appDrawerBoxsList.map((boxItem, index) => {
            return (
              <Widget key={index} {...boxItem} />
            )
          })}
        </ol>
      </div>
      {/* 选择组件 */}
      <div
        className={getClassNames([
          styles.Widgets,
          {
            [styles.WidgetsVisible]: open
          }
        ])}
      >
        <WidgetList />
      </div>
    </div>
  )
}
export default AppDrawer